<template>
    <div id="travelManagement">
        <Title :title="title"/>
        <div id="travels">
            <h2 class="travel_tji">出行统计</h2>
            <table class="travel_table">
                <tr>
                    <td>正在研学</td>
                    <td>当前出行人数</td>
                    <td>异常提醒</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>340</td>
                    <td>0</td>
                </tr>
            </table>
        </div>
        <div id="travels2">
            <p class="travel_tailAfter">出行状态跟踪</p>

            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="radio" class="t_FormItem">
                    <el-input type="text" v-model="ruleForm.radio" placeholder="搜索关键字..." style="width: 25%" autocomplete="off">
                    </el-input><el-button>搜索</el-button>
                </el-form-item>
                <el-form-item prop="region" class="t_FormItem">
                    <el-select v-model="ruleForm.region" style="width: 12.5%" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    <el-select v-model="ruleForm.region" style="width: 12.5%" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    <el-button>查询</el-button>
                </el-form-item>
                <el-form-item prop="type" class="t_FormItem">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="显示所有研学路线" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <div class="travel_studies">
                <el-container>
                    <el-aside width="280px">
                        <el-radio class="travel_studiesRadio" v-model="radio" label="2">郑州市第九中学红旗渠研学</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="3">郑州市第八中学云台山研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="4">郑州市纬一路小学红旗渠研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="5">郑州市一中绿博园研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="2">郑州市互助路小学博物院研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="3">郑州市今明双语小学云台山研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="4">郑州市第九中学南湾湖研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="5">郑州市实验中学嵩山少林寺研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="2">郑州市十一中郭亮村研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="3">郑州市外国语五云山研学旅行</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="4">文化路一小动物园研学</el-radio>
                        <el-radio class="travel_studiesRadio" v-model="radio" label="5">文化绿城小学博物馆研学</el-radio>
                    </el-aside>
                </el-container>
            </div>
            <div class="travel_baidu">
                <baidu-map class="travel_baiduMap" :center="center" :zoom="zoom" @ready="handler"
                           :scroll-wheel-zoom='true'>
                </baidu-map>
            </div>
        </div>
        <div id="travels3">
            <p class="travel_tailAfter2">出行计划详情</p>

            <el-tabs v-model="activeName" @tab-click="handleClick" class="travels_tabs">
                <el-tab-pane label="学校出行状况" name="学校出行状况">
                    <SchoolTravelConditions/>
                </el-tab-pane>
                <el-tab-pane label="出行目的地" name="出行目的地">
                    <TravelDestination/>
                </el-tab-pane>
                <el-tab-pane label="在途信息" name="在途信息">在途信息</el-tab-pane>
                <el-tab-pane label="团队信息" name="团队信息">团队信息</el-tab-pane>
                <el-tab-pane label="学生信息" name="学生信息">学生信息</el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>

<script>

    import Title from "../../../components/title/Title";
    import {Container,Aside,Radio,Form,FormItem,
        Input,Button,Select,Option,
        CheckboxGroup,Checkbox,Tabs,TabPane} from "element-ui"
    import SchoolTravelConditions from "./schoolTravelConditions/SchoolTravelConditions";
    import TravelDestination from "./travelDestination/TravelDestination";

    export default {
        name: "TravelManagement",
        data(){
          return{
              title:'出行管理',
              radio:'',
              center: {lng: 109.45744048529967, lat: 36.49771311230842},
              zoom: 13,
              activeName: '学校出行状况',
              ruleForm:{
                  radio:'',
                  type:''
              },
              rules:{

              }
          }
        },
        components:{
            Title,
            'el-container':Container,
            'el-aside':Aside,
            'el-radio':Radio,
            'el-form':Form,
            'el-form-item':FormItem,
            'el-input':Input,
            'el-button':Button,
            'el-select':Select,
            'el-option':Option,
            'el-checkbox-group':CheckboxGroup,
            'el-checkbox':Checkbox,
            'el-tabs':Tabs,
            'el-tab-pane':TabPane,
            SchoolTravelConditions,
            TravelDestination
        },
        methods:{
            handler ({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15
            }
        }
    }

</script>

<style lang="less" scoped>

    @import "../../../assets/travelManagement.css";

</style>